<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item" v-if="!isWxReg">
				<view class="label">手机号</view>
				<view class="content">
					<input v-model="form.phone" placeholder-class="placeholder-input" maxlength="11" type="tel"
						placeholder="请输入手机号" />
				</view>
			</view>
			<view class="form-column-item" v-if="!isWxReg">
				<view class="label">验证码</view>
				<view class="content">
					<input placeholder-class="placeholder-input" v-model="form.code" type="number"
						placeholder="请输入验证码" />
					<view class="sms-code flex-xy-center" @tap="sendSms" :class="{disabled: timer}">
						{{timer ? countdown + 's后重发' : '获取验证码'}}
					</view>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">密码</view>
				<view class="content">
					<input v-model="form.password" placeholder-class="placeholder-input" type="password"
						placeholder="请输入密码" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">确认密码</view>
				<view class="content">
					<input v-model="form.verifyPassword" placeholder-class="placeholder-input" type="password"
						placeholder="请再次输入密码" />
				</view>
			</view>


			<view class="agreement flex-xy-center">
				<label @tap="isAgree = !isAgree" class="flex-y-center">
					<radio :checked="isAgree" color="#FE5A13" style="transform: scale(.6);"></radio>
					<text>我已阅读并同意</text>
					<text class="agree-text" @tap.stop="$myUni.navTo('/pages/other/richText?from=REGISTRATION_AGREEMENT')">《注册协议》</text>
				</label>
			</view>
		</view>

		<view class="bottom-btn-wrapper">
			<SubmitBtn text="提交"  @click="submit"></SubmitBtn>
		</view>

	</view>
</template>

<script>
	import {
		toast,
		navTo,
		backTo
	} from '../../utils/uni-api';
	import validate from '@/utils/validate.js'
	import { register, wxLogin } from '@/api/user.js'
	import { sendSmsCode } from '@/api/common.js'
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: '',
					password: '',
					verifyPassword: '',
					type: 1,
					identity: 1  // 身份 1-个人 2-企业
				},
				countdown: 59,
				timer: '',
				isAgree: false,
				isWxReg: false, // 是否是微信注册
			};
		},
		onLoad(option){
			this.isWxReg = !!option.isWxReg || false
		},
		methods: {
			sendSms() {
				if (!validate.isNotEmpty(this.form.phone, '手机号')) return
				if (!validate.isPhone(this.form.phone, '手机号')) return
				if (this.timer) return
				sendSmsCode({phone: this.form.phone, use: 1}).then(res => {
					toast('验证码发送成功')
					this.timer = setInterval(() => {
						this.countdown--;
						if (this.countdown < 1) {
							clearInterval(this.timer)
							this.timer = ''
							this.countdown = 59
						}
					}, 1000)
				})
				
			},
			submit() {
				// 非微信注册
				if(!this.isWxReg){
					if (!validate.isNotEmpty(this.form.phone, '手机号')) return
					if (!validate.isPhone(this.form.phone, '手机号')) return
					if (!validate.isNotEmpty(this.form.code, '验证码')) return
				}
				if (!validate.isNotEmpty(this.form.password, '密码')) return
				if (!validate.isNotEmpty(this.form.verifyPassword, '确认密码')) return
				if (this.form.password !== this.form.verifyPassword) {
					return toast('两次输入密码不一致')
				}
				if(!this.isAgree){
					return toast('请阅读并同意《注册协议》');
				}
				// 微信授权注册
				if(this.isWxReg){
					const wxRegisterData = this.$store.state.user.wxRegisterData
					wxLogin({...wxRegisterData, ...this.form}).then(userInfo => {
						toast('注册成功', true)
						this.$store.commit('user/SET_TOKEN', userInfo.result.token)
						this.$store.commit('user/SET_USERINFO', userInfo.result.member)
						this.$store.commit('user/SET_ISLOGIN', true);
						setTimeout(() => {
							navTo('/pages/index/index', 'switchTab')
						}, 800)
					})
				}else{
					register(this.form).then(res => {
						toast('注册成功，请前往登录', true)
						setTimeout(() => {
							backTo('/pages/user/login')
						}, 800)
					})
				}
				
			}

		}
	}
</script>

<style lang="scss">
	.sms-code {
		width: 163rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 25rpx;
		color: $theme-color;
	}

	.disabled {
		border: 1rpx solid #d1d1d1;
		color: #d1d1d1;
	}

	.agreement {
		padding: 40rpx 0 30rpx;
		font-size: 26rpx;

		.agree-text {
			color: $theme-color;
		}
	}
</style>